<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%
    String basePath = request.getScheme() + "://" +
            request.getServerName() + ":" + request.getServerPort() +
            request.getContextPath() + "/";
%>
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>后台管理界面</title>

    <script src="static/Js/jQuery.js"></script>
    <link rel="stylesheet" href="./static/css/layui.css">
    <link rel="stylesheet" href="./static/css/modules/layer/default/layer.css">
    <link rel="stylesheet" href="./static/css/modules/laydate/default/laydate.css">
    <style>
        body{
            position: fixed;
            left: 0;
            right: 0;
            top: 0;
            bottom: 0;
            background: url(static/background/bg10.jpg) no-repeat;
            background-size: cover;
        }
        .layui-header{
            opacity: 0.9;
        }
        .layui-body{
            background-color: rgba(250,250,250,.95);
        }
        .layui-btn-xs{
            background-color: #b9aaaa;
            padding: 0px 30px;
            font-size: 14px;
            border-radius: 5px;
            color: #f9f9f9;
        }
        .layui-input{
            display: block;
            width: 90%;
            padding-left: 10px;
        }
        .layui-form-label {
            float: left;
            display: block;
            padding: 9px 15px;
            width: 58px;
            font-weight: 400;
            line-height: 20px;
            text-align: right;
        }
        #insertBtn{
            height: 30px;
            padding: 0 60px;
            position: absolute;
            right: 33px;
            bottom: 72px;
            line-height: 30px;
            font-size: 16px;
        }
        .layer-insert{
            height: 235px;
            width: 500px;
            display: none;
        }
        .commit{
            width: 50px;
            height: 30px;
            position: absolute;
            right: 40px;
            top: 170px;
            text-align: center;
            font-size: 16px;
            line-height: 30px;
            border-radius: 5px;
        }
    </style>
</head>
<body>
<%--添加用户弹出层--%>
<div class="layer-insert" id="layer-insertUser">
    <div class="layui-form-item">
        <label class="layui-form-label">用户名</label>
        <div class="layui-input-block">
            <input type="text" id="insertUser-username" required placeholder="请输入用户名" class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">密码</label>
        <div class="layui-input-block">
            <input type="text" id="insertUser-password" required placeholder="请输入密码" class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
    <label class="layui-form-label">邮箱</label>
    <div class="layui-input-block">
        <input type="text" id="insertUser-email" required placeholder="请输入邮箱" class="layui-input">
    </div>
</div>
    <a href="javascript:;"><div id="commitUser"   class="layui-btn-xs commit">提交</div></a>
</div>

<%--添加商品弹出层--%>
<div class="layer-insert" id="layer-insertCommodity">
    <div class="layui-form-item">
        <label class="layui-form-label">商品名</label>
        <div class="layui-input-block">
            <input type="text" id="insertCommodity-name" required placeholder="请输入商品名" class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">价格</label>
        <div class="layui-input-block">
            <input type="text" id="insertCommodity-price" required placeholder="请输入价格" class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">分类</label>
        <div class="layui-input-block">
            <input type="text" id="insertCommodity-classification" required placeholder="请输入分类" class="layui-input">
        </div>
    </div>
    <a href="javascript:;"><div id="commitCommodity"   class="layui-btn-xs commit">提交</div></a>
</div>



<div class="layui-layout layui-layout-admin">
    <div class="layui-header">
        <div class="layui-logo layui-hide-xs layui-bg-black">后台管理</div>
        <!-- 头部区域（可配合layui 已有的水平导航） -->
        <ul class="layui-nav layui-layout-left">
            <!-- 移动端显示 -->
            <li class="layui-nav-item layui-show-xs-inline-block layui-hide-sm" lay-header-event="menuLeft">
                <i class="layui-icon layui-icon-spread-left"></i>
            </li>

            <li class="layui-nav-item layui-hide-xs" id="btn-User"><a href="javascript:;">显示用户列表</a> </li>
            <li class="layui-nav-item layui-hide-xs" id="btn-Commodity"><a href="javascript:;">显示商品列表</a></li>
<%--            <li class="layui-nav-item layui-hide-xs"><a href="">nav 3</a></li>--%>
<%--            <li class="layui-nav-item">--%>
<%--                <a href="javascript:;">nav groups</a>--%>
<%--                <dl class="layui-nav-child">--%>
<%--                    <dd><a href="">menu 11</a></dd>--%>
<%--                    <dd><a href="">menu 22</a></dd>--%>
<%--                    <dd><a href="">menu 33</a></dd>--%>
<%--                </dl>--%>
<%--            </li>--%>
        </ul>
        <ul class="layui-nav layui-layout-right">
            <li class="layui-nav-item layui-hide layui-show-md-inline-block">
                <a href="javascript:;">
                    <!-- <img src="//tva1.sinaimg.cn/crop.0.0.118.118.180/5db11ff4gw1e77d3nqrv8j203b03cweg.jpg" class="layui-nav-img"> -->
                    Okami
                </a>
                <dl class="layui-nav-child">
                    <dd><a href="">Your Profile</a></dd>
                    <dd><a href="">Settings</a></dd>
                    <dd><a href="">Sign out</a></dd>
                </dl>
            </li>
            <li class="layui-nav-item" lay-header-event="menuRight" lay-unselect>
                <a href="javascript:;">
                    <i class="layui-icon layui-icon-more-vertical"></i>
                </a>
            </li>
        </ul>
    </div>

    <div class="layui-side layui-bg-black">
        <div class="layui-side-scroll">
            <!-- 左侧导航区域（可配合layui已有的垂直导航） -->
            <ul class="layui-nav layui-nav-tree" lay-filter="test">
                <li class="layui-nav-item layui-nav-itemed">
                    <a class="" href="javascript:;">menu group 1</a>
                    <dl class="layui-nav-child">
                        <dd><a href="javascript:;">menu 1</a></dd>
                        <dd><a href="javascript:;">menu 2</a></dd>
                        <dd><a href="javascript:;">menu 3</a></dd>
                        <dd><a href="">the links</a></dd>
                    </dl>
                </li>
                <li class="layui-nav-item">
                    <a href="javascript:;">menu group 2</a>
                    <dl class="layui-nav-child">
                        <dd><a href="javascript:;">list 1</a></dd>
                        <dd><a href="javascript:;">list 2</a></dd>
                        <dd><a href="">超链接</a></dd>
                    </dl>
                </li>
                <li class="layui-nav-item"><a href="javascript:;">click menu item</a></li>
                <li class="layui-nav-item"><a href="">the links</a></li>
            </ul>
        </div>
    </div>

    <div class="layui-body">
        <!-- 内容主体区域 -->
        <div style="padding: 15px;">
            <!-- 主体内容区域 -->
<%--            <button class="layui-upload-button" >显示商品列表</button>--%>
            <table id="demo" lay-filter="test"></table>
            <a href="javascript:;"><div id="insertBtn" class="layui-btn-xs">添加</div></a>



        </div>
    </div>

    <div class="layui-footer">
        <!-- 底部固定区域 -->
        底部固定区域
    </div>
</div>
<script src="static/Js/layui.js"></script>

<script type="text/html" id="barDemo">
<%--    <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>--%>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>
<%--初始化表单--%>
<script>
    //JS


    layui.use(['element', 'layer', 'util'], function(){
        var element = layui.element
            ,layer = layui.layer
            ,util = layui.util
            ,$ = layui.$;

        //头部事件
        util.event('lay-header-event', {
            //左侧菜单事件
            menuLeft: function(othis){
                layer.msg('展开左侧菜单的操作', {icon: 0});
            }
            ,menuRight: function(){
                layer.open({
                    type: 1
                    ,content: '<div style="padding: 15px;">处理右侧面板的操作</div>'
                    ,area: ['260px', '100%']
                    ,offset: 'rt' //右上角
                    ,anim: 5
                    ,shadeClose: true
                });
            }
        });

    });
    //默认展示User
    layui.use('table', function(){
        var table = layui.table;

        table.render({
            height: 'full-150'
            ,id:"User"
            ,elem: '#demo'
            ,url: '/ch07/queryAllUser.do' //数据接口
            ,page: true //开启分页
            ,cols: [[ //表头
                // {field: 'id', title: 'ID', width:80, sort: true, fixed: 'left'}
                // ,
                {field: 'id', title: '编号',  sort: true}
                ,{field: 'username', title: '用户名', edit: 'text'}
                ,{field: 'password', title: '密码', edit: 'text'}
                ,{field: 'email', title: '邮箱', edit: 'text'}
                ,{field: 'right',title: '操作',width:150,toolbar:'#barDemo'}
                //   ,{field: 'sign', title: '签名', width: 177}
                //   ,{field: 'experience', title: '积分', width: 80, sort: true}
                //   ,{field: 'score', title: '评分', width: 80, sort: true}
                //   ,{field: 'classify', title: '职业', width: 80}
                //   ,{field: 'wealth', title: '财富', width: 135, sort: true}
            ]]
        });
        //重新监听行事件
        table.on('tool(test)', function(obj){
            var data = obj.data;
            console.log(obj)

            if(obj.event === 'del'){
                layer.confirm('真的删除行么', function(index){
                    obj.del();
                    layer.close(index);
                    console.log(obj.data);
                    $.ajax({
                        url:"/ch07/deleteUser.do",
                        type:"get",
                        contentType:"application/json,charset=utf-8",
                        dataType:"text",
                        data:data,
                        success:function (res){
                            console.log(res);
                            if (res === 'deleteSuccess'){
                                layer.msg('删除成功');
                            }
                            else{
                                layer.msg('删除失败');
                            }
                        }

                    })
                });
            }
        });
    });
</script>


<%--头部显示不同表单--%>
<script>
    $("#btn-Commodity").bind("click",function (){
        layui.use('table', function(){
            var table = layui.table;

            //重新渲染到Commodity
            table.render({
                id:"Commodity"
                ,elem: '#demo'
                ,height: 'full-150'
                ,url: '/ch07/queryAllCommodity.do' //数据接口
                ,page: true //开启分页
                ,cols: [[ //表头
                    // {field: 'id', title: 'ID', width:80, sort: true, fixed: 'left'}
                    // ,
                    {field: 'id', title: 'Id', sort: true}
                    ,{field: 'name', title: 'name', sort: true , edit: 'text'}
                    ,{field: 'price', title: 'price', sort: true , edit: 'text'}
                    ,{field: 'classification', title: 'classification', sort: true, edit: 'text'}
                    ,{field: 'right',title: '操作',width:150,toolbar:'#barDemo', edit: 'text'}
                    //   ,{field: 'sign', title: '签名', width: 177}
                    //   ,{field: 'experience', title: '积分', width: 80, sort: true}
                    //   ,{field: 'score', title: '评分', width: 80, sort: true}
                    //   ,{field: 'classify', title: '职业', width: 80}
                    //   ,{field: 'wealth', title: '财富', width: 135, sort: true}
                ]]

            });
            //重新监听行事件
            table.on('tool(test)', function(obj){
                var data = obj.data;
                console.log(obj)

                if(obj.event === 'del'){
                    layer.confirm('真的删除行么', function(index){
                        obj.del();
                        layer.close(index);
                        console.log(obj.data);
                        $.ajax({
                            url:"/ch07/deleteCommodity.do",
                            type:"get",
                            contentType:"application/json,charset=utf-8",
                            dataType:"text",
                            data:data,
                            success:function (res){
                                console.log(res);
                                if (res === 'deleteSuccess'){
                                    layer.msg('删除成功');
                                }
                                else{
                                    layer.msg('删除失败');
                                }
                            }

                        })
                    });
                }
            });
        });

    })
</script>
<script>
    $("#btn-User").bind("click",function (){
        layui.use('table', function(){
            var table = layui.table;

            //重新渲染到User
            table.render({
                elem: '#demo'
                ,height: 'full-150'
                ,url: '/ch07/queryAllUser.do' //数据接口
                ,page: true //开启分页
                ,cols: [[ //表头
                    // {field: 'id', title: 'ID', width:80, sort: true, fixed: 'left'}
                    // ,
                    {field: 'id', title: '编号',  sort: true}
                    ,{field: 'username', title: '用户名', edit: 'text'}
                    ,{field: 'password', title: '密码', edit: 'text'}
                    ,{field: 'email', title: '邮箱', edit: 'text'}
                    ,{field: 'right',title: '操作',width:150,toolbar:'#barDemo', edit: 'text'}
                    //   ,{field: 'sign', title: '签名', width: 177}
                    //   ,{field: 'experience', title: '积分', width: 80, sort: true}
                    //   ,{field: 'score', title: '评分', width: 80, sort: true}
                    //   ,{field: 'classify', title: '职业', width: 80}
                    //   ,{field: 'wealth', title: '财富', width: 135, sort: true}
                ]]

            });
            //监听行事件
            table.on('tool(test)', function(obj){
                var data = obj.data;
                console.log(obj)

                if(obj.event === 'del'){
                    layer.confirm('真的删除行么', function(index){
                        obj.del();
                        layer.close(index);
                        console.log(obj.data);
                        $.ajax({
                            url:"/ch07/deleteUser.do",
                            type:"get",
                            contentType:"application/json,charset=utf-8",
                            dataType:"text",
                            data:data,
                            success:function (res){
                                console.log(res);
                                if (res === 'deleteSuccess'){
                                    layer.msg('删除成功');
                                }
                                else{
                                    layer.msg('删除失败');
                                }
                            }

                        })
                    });
                }
            });

        });

    })
</script>

<%--弹出层--%>
<script>
    var flagUser = 1;
    var flagCommodity = 0;

    function InsertUser(){
        flagUser = 1;
        flagCommodity = 0;
        layer.open({
            type: 1,
            content: $('#layer-insertUser')
        })
    }

    function InsertCommodity(){
        flagUser = 0;
        flagCommodity = 1;
        layer.open({
            type: 1,
            content: $('#layer-insertCommodity')
        })
    }
    //初始化“添加” 按钮
    $("#insertBtn").bind("click",InsertUser);

    //添加用户弹出层的提交按钮
    $("#commitUser").bind("click",function (){
        console.log($("#insertUser-username").val());
        console.log($("#insertUser-password").val());
        console.log($("#insertUser-email").val());

        $.ajax({
            type:"get",
            url:"/ch07/insertUser.do",
            contentType:"application/json,charset=utf-8",
            dataType:"text",
            data:{"username":$("#insertUser-username").val(),
                "password":$("#insertUser-password").val(),
                "email":$("#insertUser-email").val()
            },
            success:function (res){
                console.log(res);
                if (res === "insertSuccess"){
                    layer.msg('添加成功');
                }
                else{
                    layer.msg('添加失败,该用户名已存在');
                }
            }

        })

    })

    //添加商品弹出层的提交按钮
    $("#commitCommodity").bind("click",function (){
        console.log($("#insertCommodity-name").val());
        console.log($("#insertCommodity-price").val());
        console.log($("#insertCommodity-classification").val());

        $.ajax({
            type:"get",
            url:"/ch07/insertCommodity.do",
            contentType:"application/json,charset=utf-8",
            dataType:"text",
            data:{"name":$("#insertCommodity-name").val(),
                "price":$("#insertCommodity-price").val(),
                "classification":$("#insertCommodity-classification").val()
            },
            success:function (res){
                console.log(res);
                if (res === "insertSuccess"){
                    layer.msg('添加成功');
                    layer.close("#layer-insertCommodity");
                }
                else{
                    layer.msg('添加失败,该商品已存在');
                }
            }

        })

    })


    //头部按钮切换
    $("#btn-User").bind("click",function (){
        if (flagUser != 1){
            $("#insertBtn").bind("click",InsertUser)
            $("#insertBtn").unbind("click",InsertCommodity)
        }
    })
    $("#btn-Commodity").bind("click",function (){
        if (flagCommodity != 1){
            $("#insertBtn").bind("click",InsertCommodity)
            $("#insertBtn").unbind("click",InsertUser)
        }

    })
</script>
</body>
</html>
